// 领导首页
<template>
  <div class="box">
    <h2 style="text-align: center" id="title">{{ form.proname }}</h2>

    <el-form :model="form" ref="form" label-width="80px" :inline="false" size="normal">
      <el-row :gutter="20">
        <el-col :span="6" :offset="0">
          <el-form-item label="分类:">{{ form.classname }} </el-form-item>
        </el-col>
        <el-col :span="6" :offset="0">
          <el-form-item label="督办编号:">{{ form.code }} </el-form-item>
        </el-col>
        <el-col :span="24" :offset="0">
          <el-form-item label="重点任务:">{{ form.keytask }} </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="12" :offset="0">
          <el-form-item label="工作举措:">
            <div class="Richtext" v-html="form.tasknote"></div>
          </el-form-item>
        </el-col>

        <el-col :span="12" :offset="0">
          <el-form-item label="完成标准:">
            <div class="Richtext" v-html="form.standstr"></div>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="12" :offset="0">
          <el-form-item label="备注:">
            <div class="Richtext" v-html="form.note"></div>
          </el-form-item>
        </el-col>
        <el-col :span="12" :offset="0">
          <el-form-item label="说明:">
            <div class="Richtext" v-html="form.remark"></div>
          </el-form-item>
        </el-col>
      </el-row>

      <h3>
        <span>成果与限制时间</span>
      </h3>
      <div>
        <el-table :data="tableData" border stripe style="width: 100%">
          <el-table-column prop="objective" label="预期标志性成果">
            <template slot-scope="scope">
              <div v-html="scope.row.objective"></div>
            </template>
          </el-table-column>
          <el-table-column prop="enddate" align="center" label="要求完成时间" width="180" />
          <el-table-column prop="workdpname" label="责任部门" width="180"> </el-table-column>
        </el-table>
      </div>

      <h3>
        <span>任务拆分 </span>
      </h3>
    </el-form>
    <el-form :model="tableform" :rules="rules" ref="tableform">
      <el-table
        :data="tableform.tableData2"
        style="width: 100%"
        border
        highlight-current-row
        @current-change="handleCurrentChange"
      >
        <el-table-column label="操作" width="180px" align="center">
          <template slot-scope="scope">
            <el-button type="primary" @click="addTable(scope.row, scope.$index)">拆分</el-button>

            <el-button type="danger" @click="delTable(scope.row, scope.$index)">删除</el-button>
          </template>
        </el-table-column>
        <el-table-column prop="objective" label="任务描述" min-width="370">
          <template slot-scope="scope">
            <el-form-item :prop="'tableData2[' + scope.$index + '].objective'" :rules="rules.objective">
              <el-input
                type="textarea"
                :autosize="{ minRows: 1, maxRows: 4 }"
                placeholder="请输入内容"
                v-model="scope.row.objective"
              />
            </el-form-item>
          </template>
        </el-table-column>
        <el-table-column prop="enddate" align="center" label="完成时间" width="250">
          <template slot-scope="scope">
            <el-form-item :prop="'tableData2[' + scope.$index + '].enddate'" :rules="rules.enddate">
              <el-date-picker
                v-model="scope.row.enddate"
                value-format="yyyy-MM-dd"
                type="date"
                placeholder="选择日期"
              />
            </el-form-item>
          </template>
        </el-table-column>
        <el-table-column prop="workusername" align="center" label="人员选择" width="250">
          <template slot-scope="scope">
            <el-form-item :prop="'tableData2[' + scope.$index + '].workusername'" :rules="rules.workusername">
              <el-input v-model="scope.row.workusername" @change="onClaerRy()" :readonly="true" clearable>
                <el-button
                  slot="prepend"
                  type="primary"
                  icon="el-icon-plus"
                  @click="onOpenRy(scope.$index)"
                ></el-button>
                <el-button
                  slot="append"
                  type="danger"
                  icon="el-icon-close"
                  @click="onClaerRy(scope.$index)"
                ></el-button>
              </el-input>
            </el-form-item>
          </template>
        </el-table-column>
        <el-table-column prop="cust" align="center" label="增加协办部门" width="350">
          <template slot-scope="scope">
            <el-form-item>
              <el-input v-model="scope.row.otherdpname" :readonly="true" clearable>
                <el-button
                  slot="prepend"
                  type="primary"
                  icon="el-icon-plus"
                  @click="Clickcurr(scope.$index)"
                ></el-button>
                <el-button
                  slot="append"
                  type="danger"
                  icon="el-icon-close"
                  @click="onClaerbm(scope.$index)"
                ></el-button>
              </el-input>
            </el-form-item>
          </template>
        </el-table-column>
      </el-table>
    </el-form>

    <div class="saveanxf">
      <el-button type="primary" @click="onSave">保存</el-button>
      <el-button type="primary" @click="Issued">下发</el-button>
    </div>
    <renyuan
      :visiblesry="visiblesry"
      :selection="selection"
      :orgname="orgname"
      @fatherry="visiblesry = false"
      @onChoosery="onChoosery"
    />
    <bumen
      :visiblesbm="visiblesbm"
      :selection="selection"
      @fatherbm="visiblesbm = false"
      @onChoosebm="onChoosebm"
    ></bumen>
  </div>
</template>

<script>
import { TaskQueryInfoByID, SplitSave, QueryTaskStandList, SplitDown, Deldetail } from '@/api/task/index'
import renyuan from '@/views/peizhixinxi/shenpimobandialog/components/renyuan.vue'
import bumen from '@/views/peizhixinxi/shenpimobandialog/components/bumen.vue'

export default {
  name: 'type2',
  components: { renyuan, bumen },
  data() {
    return {
      form: {},
      visiblesry: false,
      visiblesbm: false,
      // 控制人员选择-是不是多选-查询是不是只读-与确定按钮
      selection: true,
      DataIndex: '',
      addTablerow: {},
      tableData: [],
      tableform: {
        tableData2: []
      },
      orgname: this.$store.getters.userInfo.orgname,

      userdata: {
        taskid: this.$route.query.id,
        loguserid: this.$store.getters.userInfo.id,
        logorgid: this.$store.getters.userInfo.orgid
      },
      handleCurrent: null,
      rules: {
        objective: [{ required: true, message: '请输入任务描述', trigger: 'blur' }],
        enddate: [{ required: true, message: '请选择日期', trigger: 'change' }],
        workusername: [{ required: true, message: '请选择人员', trigger: 'change' }]
      }
    }
  },
  watch: {
    // '$route.query.id': {
    //   immediate: true,
    //   handler(newId) {
    //     this.userdata.taskid = newId
    //     if (this.userdata.taskid != undefined) {
    //       this.onSearch()
    //     }
    //   }
    // },
    $route: {
      immediate: true,
      handler(newId) {
        if (newId.path == '/Fourth/EmployeeHome/type2') {
          this.userdata.taskid = this.$route.query.id
          this.onSearch()
        }
      }
    }
  },
  created() {
    // this.onSearch()
  },
  methods: {
    // 页面查询
    async onSearch() {
      const { content } = await TaskQueryInfoByID({ id: this.$route.query.id })
      if (content == null) {
        this.form = {}
      } else {
        if (content.tasknote != null) {
          content.tasknote = content.tasknote.replace(/\\n/g, '<br/>')
          content.tasknote = content.tasknote.replace(/\n/g, '<br/>')
        }

        if (content.standstr != null) {
          content.standstr = content.standstr.replace(/\\n/g, '<br/>')
          content.standstr = content.standstr.replace(/\n/g, '<br/>')
        }

        if (content.note != null) {
          content.note = content.note.replace(/\\n/g, '<br/>')
          content.note = content.note.replace(/\n/g, '<br/>')
        }

        if (content.remark != null) {
          content.remark = content.remark.replace(/\\n/g, '<br/>')
          content.remark = content.remark.replace(/\n/g, '<br/>')
        }

        this.form = content
      }

      const res = await QueryTaskStandList({ ...this.userdata, type: 1 })
      res.content.forEach(item => {
        if (item.objective != null) {
          item.objective = item.objective.replace(/\\n/g, '<br/>')
          item.objective = item.objective.replace(/\n/g, '<br/>')
        }
      })

      this.tableData = res.content
      this.DirectorSplit()
    },
    // 主任拆分查询
    async DirectorSplit() {
      const newArr = { ...this.userdata, type: 2 }
      const { content } = await QueryTaskStandList(newArr)
      let res = content
      if (content.length == 0) {
        const newArr = { ...this.userdata, type: 1 }
        const { content } = await QueryTaskStandList(newArr)
        res = content
      }
      this.tableform.tableData2 = res
    },
    // 点击添加行
    addTable(row, index) {
      this.addTablerow = row
      this.tableform.tableData2.splice(index + 1, 0, {})
    },
    // 点击删除
    async delTable(data, index) {
      this.$confirm('此操作将永久删除, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(async () => {
          if (data.id == undefined) {
            this.tableform.tableData2.splice(index, 1)
          } else {
            const res = await Deldetail({ id: data.id })
            if (res.success) {
              this.tableform.tableData2.splice(index, 1)
              this.$message.success(res.message)
            } else {
              this.$message.error(res.message)
            }
          }
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
    },
    // 人员选择 添加
    onOpenRy(index) {
      this.DataIndex = index
      this.visiblesry = true
    },
    // 人员选择回调函数
    onChoosery(row) {
      this.$set(this.tableform.tableData2[this.DataIndex], 'workusername', row.username)
      this.$set(this.tableform.tableData2[this.DataIndex], 'workuserid', row.id)
    },
    // 人员选择 删除
    onClaerRy(index) {
      this.tableform.tableData2[index].workusername = ''
      this.tableform.tableData2[index].workuserid = ''
    },
    // 协办部门 添加
    Clickcurr(index) {
      this.DataIndex = index
      this.visiblesbm = true
    },
    // 协办部门选择回调函数
    onChoosebm(row) {
      console.log(row)
      var otherdpid = ''
      var otherdpname = ''
      row.forEach((item, index) => {
        if (index < 1) {
          otherdpid += item.id
          otherdpname += item.orgname
        } else {
          otherdpid += ';' + item.id
          otherdpname += ';' + item.orgname
        }
      })
      console.log(otherdpid)
      console.log(otherdpname)

      this.$set(this.tableform.tableData2[this.DataIndex], 'otherdpid', otherdpid)
      this.$set(this.tableform.tableData2[this.DataIndex], 'otherdpname', otherdpname)
    },
    // 协办部门 删除
    onClaerbm(index) {
      this.tableform.tableData2[index].otherdpid = ''
      this.tableform.tableData2[index].otherdpname = ''
    },
    // 列表选中的数据
    handleCurrentChange(val) {
      this.handleCurrent = val
    },
    // 保存
    async onSave(data) {
      this.$refs.tableform.validate(async valid => {
        if (valid) {
          this.tableform.tableData2.forEach((item, index) => {
            if (!item.id) {
              item.id = 0
              item.pid = this.tableform.tableData2[index - 1].pid
            } else {
              if (!item.pid) {
                item.pid = item.id
                item.id = 0
              }
            }
          })
          const arr = {
            id: this.$route.query.id,
            proid: this.form.proid,
            userid: this.$store.getters.userInfo.id,
            username: this.$store.getters.userInfo.username,
            detail: [...this.tableform.tableData2]
          }

          console.log(arr)
          const res = await SplitSave(arr)
          console.log(res.success)
          if (res.success == true) {
            this.DirectorSplit()
            this.$message.success(res.message)
            if (data == 'issd') {
              const obj = {
                id: this.$route.query.id,
                dpid: this.$store.getters.userInfo.orgid,
                hisid: this.$route.query.hsid
              }

              const res = await SplitDown(obj)
              if (res.success == true) {
                this.$store.dispatch('tagsView/delView', this.$route)
                this.$router.go(-1)
              }
            }
          } else {
            this.$message.error(res.message)
          }
        } else {
          console.log('验证失败')
        }
      })
    },
    //下发
    async Issued() {
      await this.onSave('issd')
    }
  }
}
</script>

<style scoped>
.box {
  padding: 20px;
  background-color: #fdfbf2;
  position: relative;
}

.el-card {
  background-color: transparent;
}

.box >>> .el-table,
.el-table__expanded-cell {
  background-color: transparent;
  /* border: 1px solid #000; */
}

.box >>> .el-table th {
  background-color: transparent !important;
  /* border: 1px solid #000; */
}
.box >>> .el-table tr {
  background-color: transparent !important;
  /* border: 1px solid #000; */
}

#todo-col {
  padding: 0 20px 20px 0;
}
#Fill-col {
  padding: 10px 20px 0 0;
}
#todo-task {
  padding: 0 20px 20px 0;
}
#Fill-Echart {
  padding: 10px 20px 0 0;
}

.task-card {
  overflow: auto;
  height: 310px;
}
.task-div {
  padding-bottom: 15px;
}
.showProgressColor >>> .el-progress-bar__inner {
  background: linear-gradient(to right, blue, pink);
}
.box >>> .el-link {
  border-bottom: 1px solid #13ce66;
}
.red {
  background: lightyellow;
}
.saveanxf {
  margin-top: 20px;
}
.Richtext {
  word-break: break-all;
  margin-right: 5px;
  line-height: 1.5;
  border: 1px solid #dcdfe6;
  height: 120px;
  overflow: auto;
  padding-left: 5px;
}
</style>
